/* 
Optimize the game for mobile screens if the window is under 660px 
Code by Yhvr. Why are you here, anyways?
Oops, ignore all the `!important`, please.
*/


@media screen and (max-width: 660px), (max-height: 550px) {
  #hardy {
    overflow-x: hidden;
    height: 75px;
    /* vertically center text */
    line-height: 35px;
  }
  
  #factorContainer {
    height: 400px !important;
  }
  .treeButton {
   font-family: sans-serif;
   border-width:1.5px;
   cursor: pointer;
   transition-duration: 0.1s;
   margin: center;
   width: 120px !important;
   height: 60px !important;
   font-size: 12px !important;
  }
  .tabButton, .infinityTabButton,
  .boosterTabButton, .collapseTabButton {
    width: calc(50vw - 1ch - 1em - 12px) !important;
    height: 50px !important;
  }
  
  .invisTab {
    display: none !important;
  }
  
  .normalButton, button[onclick="resetConf()"], button[onclick="infinity(1)"],
  #autoInfButton, #autoMaxButton{
    width: 75vw !important;
    min-height: 37.5px !important;
    font-size: 15px !important;
  }
  
  span {
    display: inline !important;
  }
  
  #changeOffline {
    margin: 0 !important;
  }

  .subtab {
    min-width: 100px !important;
    height: 35px !important;
    font-size: 14px !important;
  }
  
  html {
    width: 100% !important;
  }
  
  .infinityButton {
    min-width: 140px !important;
    min-height: 30px !important;
    font-size: 14px !important;
  }

  ul#factorListMain {
	  padding-left: 0px;
  }
  
  li > .infinityButton {
	width: 50vw !important;
  }

  div[style="height: 270px"] {
	height: 375px !important;
  }

  #boosterText {
    display: block !important;
  }
  
  #darkManifoldMaxMode {
    height: 35px !important;
  }
  
  table#cardinalTable > tbody > tr {
    width: 100%;
  }
  
  table#cardinalTable > tbody > tr > td {
    display: block;
    width: 100%;
  }
  
  .assignButtons {
    margin: 0 !important;
  }
  
  #cardMult1, #cardMult2, #cardMult3 {
    display: inline;
    padding: 0 5px;
  }
  
  #cardExtra3 {
    display: inline;
  }
  
  .slugMile, .notSlugMile {
    width: 75vw !important;
    height: 100px !important;
    margin-bottom: 5px;
  }
  
  #slug5 {
    height: auto !important;
  }
  
  tr.trueCenter.long {
    margin: 0 !important;
  }
  
  #aup1, #aup2, #aup3, #aup4,
  #aup5, #aup6, #aup7, #aup8 {
    width: 199px !important;
  }
}
